<template>
  <transition
    name="animate__animated animate__bounce"
    appear
    enter-active-class="animate__backInDown"
  >
    <div class="header-container">
      <div class="l-content">
        <el-button
          @click="collapseMenu"
          icon="el-icon-menu"
          size="mini"
          style="margin-right: 10px"
        ></el-button>

        <!-- 面包屑 -->
        <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="list in tags"
          :key="list.path"
          :to="{ path: list.path }"
          >{{ list.label }}</el-breadcrumb-item
        > -->
        <!-- <el-breadcrumb-item
          v-for="item in list"
          :key="item.path"
          :to="{ path: item.path }"
          >{{ item.meta.title }}</el-breadcrumb-item
        > -->
        <!-- </el-breadcrumb> -->
        <!-- tag -->
        <CommonTag />
      </div>
      <div class="r-content">
        <el-dropdown @command="handleClick">
          <span class="el-dropdown-link">
            <el-avatar>
               <img src="../assets/logo.png" class="user" />
            </el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="person">个人简历</el-dropdown-item>
            <el-dropdown-item command="cancel">退出登录 </el-dropdown-item>
            <el-dropdown-item command="search">GitHub用户搜索</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import CommonTag from "./CommonTag.vue";
import Cookie from "js-cookie";
export default {
  name: "CommonHeader",
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabList,
    }),
    list() {
      return this.$route.matched;
    },
  },
  methods: {
    ...mapMutations("tab", ["collapseMenu"]),

    //退出登录
    handleClick(command) {
      if (command === "cancel") {
        console.log("退出");
        //清楚cookie token 信息
        Cookie.remove("token");

        //清除cookie中的menu
        Cookie.remove("menu");

        //提示框
        this.$message({
          message: "成功退出登录",
          type: "success",
        });
        //跳转到登录页面
        this.$router.replace("/login");
      }
      if (command === "person") {
        //提示框
        this.$message({
          message: "成功进入简历页面",
          type: "success",
        });

        //跳转到个人简历页面
        this.$router.replace("/person");
      }
      if (command === "search") {
        //提示框
        this.$message({
          message: "成功进入搜索",
          type: "success",
        });

        //跳转到搜索页面
        this.$router.replace("/search");
      }
    },
  },
  components: {
    CommonTag,
  },
};
</script>

<style lang="less" scoped>
.header-container {
  background-color: #f38c73;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .test {
    color: aliceblue;
    font-size: 16px;
    margin-left: 13px;
  }
  .r-content {
    .user {
      width: 40px;
      object-fit: cover;
      box-shadow: 0 2px 4px;
    }
  }
  .l-content {
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-weight: normal;
        &.is-link {
          color: rgb(36, 182, 215);
        }
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: aliceblue;
        }
      }
    }
  }
}
</style>
